<template>
  <div class="codeForm">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="top">
      <!-- 项目名称 -->
      <el-form-item :label="$t('candyBox.projectName')" prop="title">
        <el-input v-model.trim="form.title" maxlength="255" clearable></el-input>
      </el-form-item>
      <!-- 项目资讯 -->
      <el-form-item :label="$t('apiTrade.projectInfo')" prop="introduction">
        <el-input v-model.trim="form.introduction" clearable></el-input>
      </el-form-item>
      <!-- 资讯来源 -->
      <el-form-item :label="$t('apiTrade.infoSources')" class="introduction" prop="media">
        <el-input v-model.trim="form.media"  maxlength="100" clearable></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Apply', // 各种申请 上币申请 1，糖果盒子2，交易大赛3，
  components: {
  },
  data() {
    return {
      form: {
        title: '',
        media: '',
        introduction: '',
        type: 4,
      },
      rules: {
        title: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        media: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        introduction: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
      },
    };
  },
  props: {
    timerUpdate: {
      type: Object,
      default: null,
    },
  },
  watch: {
    'timerUpdate.time': function change() {
      if (this.timerUpdate.action === 'submit') {
        this.handleCheckForm();
      }
      if (this.timerUpdate.action === 'reset') {
        this.handleResetForm();
      }
    },
    '$store.state.app.language': function change() {
      this.rules = {
        title: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        media: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
        introduction: [
          {
            required: true,
            message: this.$t('activity.isRequired'),
            trigger: 'blur'
          }
        ],
      }
    },
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // 重置表格
    handleResetForm() {
      this.form.title = '';
      this.form.media = '';
      this.form.introduction = '';
      this.$refs.form.clearValidate();
    },
    // 提交到服务端
    handleCheckForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('listenSubmit', 'applyArticle', this.form);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/variables.scss";

.introduction {
  /deep/ .el-textarea__inner {
    min-height: 70px !important;
  }
}

.theme-278EDA {
}
.theme-1B1D27 {
  .codeForm {
    /deep/ .el-input__inner {
      color: #000;
    }
  }
}
</style>

